<template>
  <div class="detials">
    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
      <swiper-item v-for="item of imgUrls" v-bind:key="item.$index">
        <image :src="item" class="slide-image" />
      </swiper-item>
    </swiper>
    <div class="top"><img alt="" :src="hero_logo">
      <ul>
        <li class="tag">
          <span> {{heroName}}</span>
          <span v-for="items of tag" :key="items.$index">{{items}}</span>
        </li>
        <li class="ability">
          <div v-for="items of heroAbility" :key="items.$index">
            <span>{{items.name}}</span>
            <p>
              <i :style="items.val"></i>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <ul class="skills">
      <li>属性</li>
      <li>技能</li>
      <li>符文</li>
      <li>视频</li>
    </ul>
    <scroll-view :scroll-y="true" :style="{'height': '400px'}" :scroll-with-animation="true" @scrolltolower="scrolltolower" @scroll='test'>
      <Property/>
      <!-- <Skill/>
      <Rone/>
      <Study/> -->
    </scroll-view>
  </div>
</template>
<script>
import '@/assert/lib/Tween.js'
import Property from '@/components/Property'
import Skill from '@/components/Skill'
import Rone from '@/components/Rone'
import Study from '@/components/Study'
import Tool from '@/assert/lib/tool.js'
export default {
  data() {
    return {
      key: '',
      imgUrls: [
        'http://img4.dwstatic.com/lol/1512/315311667055/1451371390731.jpg'
      ],
      hero_logo: '',//英雄头像
      heroName: '',//英雄名称
      tag: '',//标签
      abcolor: ['#1eca6b', '#f2c500', '#f59d00', '#cb8cff'],
      heroAbility: '',//英雄能力
      circular: true,
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 1000
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeroDetials()
      this.getLogo();
    })
  },
  components: { Property, Skill, Rone, Study },
  methods: {
    getLogo() {
      this.hero_logo = wx.getStorageSync('heroSingle').img;
    },
    scrolltolower() { },
    test() { },
    //设置swiper和英雄属性
    setHeroDetials(heroType) {
      this.imgUrls = heroType.swiper;
      this.tag = heroType.tag;
      this.heroAbility = heroType.heroAbility;
      this.heroAbility.map((items, index, obj) => {
        items.val += `;background:${this.abcolor[index]};`
      })
    },
    //获取英雄对应的属性
    getHeroDetials() {
      console.log(this.$root.$mp.query);
      this.heroName = this.$root.$mp.query.chinaName;
      var name = this.$root.$mp.query.name
      var vm = this;
      wx.request({
        url: `${Tool.host()}` + `hero/detials/${name}.json`,
        data: {},
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: function (res) {
          console.log(res.data)
          wx.setStorageSync('hero_detials', res.data)
          vm.setHeroDetials(res.data)
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
.detials {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  .swiper {
    padding: 20px 0;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .top {
    display: flex;
    justify-content: flex-start;
    img {
      padding: 5px 15px;
      width: 60px;
      height: 60px;
    }
    ul {
      font-size: 12px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      li {
        align-self: flex-start;
      }
      .tag {
        display: flex;
        justify-content: flex-start;
        span:not(:first-child) {
          align-self: auto;
          margin: 0 8px;
          padding: 2px 10px;
          background: burlywood;
          border-radius: 5px;
        }
      }
      .ability {
        margin-top: 5px;
        > div {
          display: flex;
          justify-content: flex-start;
          align-content: center;
          width: 100%;
          span:first-child {
            align-self: center;
            margin-right: 10px;
          }
          p {
            align-self: center;
            width: 80px;
            height: 10px;
            background: #ddd;
            overflow: hidden;
            position: relative;
            i {
              vertical-align: middle;
              height: 100%;
              position: absolute;
              left: 0;
            }
          }
        }
      }
    }
  }
  .skills {
    border-top: 10px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-content: center;
    width: 100%;
    font-size: 14px;
    margin: 10px 0;
    li {
      padding: 10px 0;
      border-bottom: 1px solid #ddd;
      text-align: center;
      width: 25%;
      align-self: center;
    }
    .active {
      border-bottom: 1px solid #e4393c;
    }
  }
}
</style>
